import request from '@/request.js'

import mapFolderItem from '@/components/mapFolderItem/mapFolderItem.vue'

/*
  on-change 随时更新地图列表 选中的地图信息
*/

export default {
  name: 'mapFolder',
  components: {
    mapFolderItem
  },
  props: {
    // 地图文件列表
    maps: {
      type: Array,
      default () {
        return []
      }
    },
    // 因为只有这个组件会改变这两个值，故无需双向绑定
  },
  data () {
    return {
      wrapperStyle: {
        width: this.width + 'px'
      },
      
      // 地图列表数据
      mapData: this.maps,
      mapSelected: null,
      mapSelectedName: '',
      
      // 添加地图
      addModal: false,
      addInput: '',
      isRootAdd: 1,
      
      // 地图更名
      renameModal: false,
      renameInput: ''
    }
  },
  computed: {
    isMapSelected () {
      if (this.mapSelected) {
        return true
      }
      return false
    },
  },
  methods: {    
    getData () {
      request.getMaps().then((data) => {
        this.mapData = data
        this.$Notice.success({
          title: '获取地图列表成功'
        })
        this.onChange('get')
      })
      .catch((err) => {
        console.log(err)
        this.$Notice.error({
          title: '获取地图列表失败'
        })
      })
    },
    
    // 只要地图列表发生变更或者选中地图发生变更，就立即触发事件
    onChange (eventName) {
      this.$emit('on-change', this.mapData, this.mapSelected, eventName)
    },
    
    // 选中地图发生变化触发
    selectHandler (name, id) {
      this.mapSelected = id
      this.mapSelectedName = name
      this.onChange('select')
    },
    
    // 添加按钮触发
    addHandler () {
      this.addModal = true
      this.addInput = ''
    },
    
    // 添加地图
    addMap () {
      if (this.addInput === '') {
        this.$Notice.error({
          title: '空字符串名称的地图不合法'
        })
        return
      }
      
      let parentId = null
      if (!this.isRootAdd && this.mapSelected) {
        parentId = this.mapSelected
      }
      
      request.addMap(parentId, this.addInput).then((data) => {
        this.mapData = data
        this.$Notice.success({
          title: '添加地图成功'
        })
        this.addModal = false
        this.onChange('add')
      })
      .catch((err) => {
        console.log(err)
        this.$Notice.error({
          title: '添加地图失败'
        })
      })
    },
    
    // 更名按钮触发
    renameHandler () {
      if (!this.mapSelected) {
        this.$Notice.error({
          title: '请选择一个地图'
        })
        return
      }
      
      this.renameModal = true
      this.renameInput = ''
    },
    
    // 地图更名
    renameMap () {
      request.renameMap(this.mapSelected, this.renameInput).then((data) => {
        this.mapData = data
        this.$Notice.success({
          title: '地图更名成功'
        })
        // 选中的名字也要同步更新
        this.mapSelectedName = this.renameInput
        this.renameModal = false
        this.onChange('rename')
      })
      .catch((err) => {
        console.log(err)
        this.$Notice.error({
          title: '地图更名失败'
        })
      })
    },
    
    // 删除地图
    deleteMap () {
      if (!this.mapSelected) {
        this.$Notice.error({
          title: '请选择一个地图'
        })
        return
      }
      this.$Modal.confirm({
        title: '删除地图',
        content: '是否删除当前选定的地图【' + this.mapSelectedName + '】',
        loading: true,
        onOk: () => {
          request.deleteMap(this.mapSelected).then((data) => {
            this.mapData = data
            // 删除成功，选中的地图清空
            this.mapSelected = null
            this.mapSelectedName = ''
            this.$Notice.success({
              title: '删除地图成功'
            })
            this.$Modal.remove()
            this.onChange('delete')
          })
          .catch((err) => {
            console.log(err)
            this.$Notice.error({
              title: '删除地图出错'
            })
            this.$Modal.remove()
          })
        }
      })        
    }
  },
  created () {
    this.getData()
  }
}